<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-left" style="display: flex">
        <treeselect
          style="width: 250px"
          v-model="value"
          :multiple="false"
          :options="rootOptions"
          :disable-branch-nodes="false"
          :limit="1"
          placeholder="选择部门查询"
          @select="onSelect"
          @input="oninput"
          @deselect="onDeselect"
        />
        <!-- <el-button
          v-waves
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          查询
        </el-button> -->
      </div>
    </div>
    <div v-if="deptId">
      <el-table
        :data="pageList"
        border
        stripe
        fit
        highlight-current-row
        v-loading="listLoading"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="nick" label="工时所有者" align="center">
        </el-table-column>
        <el-table-column prop="proj_name" label="涉及项目名称" align="center">
        </el-table-column>
        <el-table-column prop="total_amount" label="总工时" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleDetalis(scope.row)"
              type="text"
              size="small"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="!deptId">
      <el-empty description="暂无数据，请选择部门信息"></el-empty>
    </div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawerShow"
      :with-header="false"
      size="60%"
    >
      <div style="padding: 20px; box-sizing: border-box">
        <h3>工时详情</h3>
        <el-table
          :data="personWorking"
          border
          stripe
          fit
          highlight-current-row
          v-loading="listLoading"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="user_nick" label="工时所有者" align="center">
          </el-table-column>
          <el-table-column
            prop="work_title"
            label="填报单名称"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="projects_name"
            label="项目名称"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="start_time"
            label="工时开始日期"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="end_time" label="工时结束日期" align="center">
          </el-table-column>

          <el-table-column prop="work_amount" label="工时数量" align="center">
          </el-table-column>
          <!-- <el-table-column label="创建时间" width="200px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.created_at | formate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" width="200px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.updated_at | formate }}</span>
          </template>
        </el-table-column> -->
          <el-table-column
            prop="remarks"
            label="备注"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>
  <script>
import {
  getAllWorkingPageByDeptId,
  getWorkingDataByUserId,
} from "@/api/workingHours";
import { checkUserToken, getDataByCode } from "@/api/user";
import waves from "@/directive/waves"; // waves directive
import { curentTime } from "@/filters/index";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Department",
  components: { Pagination, Treeselect },
  directives: { waves },
  filters: {
    formate(date) {
      return curentTime(date);
    },
  },
  data() {
    return {
      // 订单数据
      pageList: [],
      // 订单总数
      total: 0,
      // 加载
      listLoading: false,
      searchKey: "",
      deptId: "",
      // 部门
      deptDate: [],
      rootOptions: [],
      value: null,
      drawerShow: false,
      personWorking: [],
    };
  },
  async created() {
    this.getRootModels();
  },
  methods: {
    // 查看个人详情
    async handleDetalis(e) {
      console.log(e);
      const { union_id } = e;
      this.drawerShow = true;
      const res = await getWorkingDataByUserId({ unionId: union_id });
      this.personWorking = res.data || [];
    },
    // 按需查询
    async handleFilter() {
      await this.getPageList();
    },

    // 查询列表
    async getPageList() {
      try {
        const res = await getAllWorkingPageByDeptId({ deptId: this.deptId });
        this.pageList = res.data || [];
        this.listLoading = false;
      } catch (error) {
        console.log(error);
      }
    },
    getRootModels() {
      //初始化数据 只加载根节点
      getDataByCode({ code: "DeptsUserTree" }).then((res) => {
        if (!res || !res.success || !res.data.DeptsUserTree)
          return this.$message({
            message: "获取部门树列表报错",
            type: "error",
          });
        const lists = this.dealTreeData(res.data.DeptsUserTree.dept_lists);
        this.rootOptions = lists;
      });
    },
    /**
     * 轮询处理树形结构列表
     */
    dealTreeData(tagArr) {
      let modeArr = [];
      for (let i = 0; i < tagArr.length; i++) {
        const item = tagArr[i];
        let modeInfo = {};
        modeInfo.id = item.dept_id;
        modeInfo.label = item.name;
        if (item.dept_lists && item.dept_lists.length) {
          modeInfo.children = this.dealTreeData(item.dept_lists);
        }
        modeArr.push(modeInfo);
      }
      return modeArr;
    },

    onSelect(node) {
      // console.log(node)
    },

    oninput(val) {
      console.log(val);
      if (val == undefined) {
        this.deptId = "";
      } else {
        this.deptId = val;
        this.listLoading = true;
        this.handleFilter();
      }
    },

    onDeselect(node) {
      // console.log(node, "Deselect");
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}
</style>
  